	body{
		font-size:30px;
		overflow-x:hidden;
	}
	#playarea{
		display:none;
	}
	 #play_title{
		font-size:70px;
		text-align:center;
		margin-left:auto;
		margin-right:auto;
    }
	
	.task{
 		margin-top:10px;
		margin-bottom:10px;
		margin-left:70px;
		margin-right:10px; 
		border-radius: 9px;
	}
   
	.task.child_unfold>div.task{
		display:block;
	}
	.task.child_fold>div.task{
		display:none;
	}
	.task.child_unfold>.task_header a.icon_fold i.fa:before{
			content: "\f115";
	}
	.task.child_fold>.task_header a.icon_fold i.fa:before{
		content: "\f114";
	}	

	.task_info_btn_bar{
		float:right;
		font-size:40px;
		display:none;
	}
	.expend_fold,.task_link,.task_comment_icon,.task_internal_link{


	}
	.task_picture{
		display:none;
	}
	.task_comment{
		font-size:30px;
		display:none;
		height:auto!important;
		background-color: rgba(234, 234, 224, 0.98);
		top: auto;
		padding:3px;
		text-align:left;
		border: 1px solid #D0D0D0;
		-webkit-box-shadow: 0 0 8px #D0D0D0;
		display:none;
	}
	.task_comment textarea{
		width:90%;
		min-height:120px;
		height:auto!important;
		height:120px;
		padding:3px;
		opacity:1.0;
		background-color: rgba(242, 233, 72, 0.98);
		border:0px;
	}
	.task_comment span{
		float:right;	
	}
	.task_comment span i.fa{
		border:0px;
	}
	.btn_tree_view{
		display:none;
	}
	div.task .fa{font-size:32px;}
	
	.tree_view{}
	.tree_view .task_title{
		display:inline;
		font-size:30px;
	}
.tree_view .iconbar>a.expend_fold{display:none;}
	.tree_view .task_comment{
		display:none;
	}
	.tree_view  .task_photo{
		display:none;
	}	
	.tree_view .current_page>.task_title{
		background-color:#23fcff;
	}
	
	.task_photo img{
		height:100%;
		max-width:100%;
		max-height:100%;
	}
	
	/* 幻灯片模式 */
	.page_view{
		
	}
	.page_view .task_title{
		background-color:transparent;
		display:none;
		margin:20px;
	}
	/* .page_view a{
		display:none;
	} */
	.page_view  div:not.task{
		display:none;
	}
	.page_view .task_comment{
		display:none;
	}
	.page_view .task_photo{
		display:none;
	}


	/* 幻灯片模式中的当前页 */
	.page_view .current_page {
		display:block;
		position:absolute;
		left:0px;
		top:0px;          
		width:100%;
		height:100%;
		margin:0px;
		background-repeat:round;
	}
	.page_view .current_page>.task_header{
		display:block;
	/*	position:absolute;
		top:30%;*/
        margin-top:15%;
		width:100%;
		text-align:center;
	}
	.page_view .current_page>.task_header>.task_title{font-size:70px;}
	.page_view .current_page>.task_header>.iconbar{display:inline;text-align:center;}
	.page_view .current_page>.task_header>.iconbar>a{display:inline;margin:0px 5px;}
	/* .page_view .current_page div.task{
		display:none;
	} */
	
	.page_view .current_page a.expend_fold{display:inline;}
	.page_view .current_page>a{
		width:32px;
		height:32px;
		margin-left:10px;
		margin-right:10px;
		display:inline;
	}
	.page_view .current_page>a>i{
		width:32px;
		height:32px;
	}
	.page_view .current_page>.btn_tree_view{
		display:inline;
	}
	.page_view .current_page .task_title{
		display:inline;
	}
	.page_view .current_page>.task_comment.z-visualise{
		display:block;
	}
	.page_view .current_page>.task_photo.z-visualise{
		display:block;
	}

	/*加上这个覆盖原animated的样式，否则图片会被文本遮住*/
	.task_comment.animated{
		-webkit-animation-fill-mode: backwards;
	}

	div.task.current_page>div.task_pic_text_area>.task_comment{
		display:block;
	}
	div.task.current_page>div.task_pic_text_area>.task_info_btn_bar{
		display:block;
	}
	.page_view .current_page>a.expend_fold>i.fa-circle{display:none;}
	
	/* 结束页 */
	#endpage{
		display:none;
		text-align:center;
	}
	.page_view div#endpage.current_page{
		display:block;
	}

	/* 当前页的子标题列表模式 */
	.page_view task.current_page.child_expend{

	}
	.page_view task.current_page.child_expend>div.task{
		display:block;
	}

	/* 当前页的详情模式	 */
	.page_view .current_page.z-detail{

	}

	/* 标题置顶 */
	.page_view .current_page.z-detail>.task_header{
	/*	position:absolute;
		top:0px;*/
		margin-top:0px;
		animation: to_detail 0.5s ease;
	}


@keyframes to_detail
{
0%   {margin-top:30%;}
100% {margin-top:0px;}
}

@-moz-keyframes to_detail /* Firefox */
{
0%   {margin-top:30%;}
100% {margin-top:0px;}
}

@-webkit-keyframes to_detail /* Safari 和 Chrome */
{
0%   {margin-top:30%;}
100% {margin-top:0px;}
}

@-o-keyframes to_detail /* Opera */
{
0%   {margin-top:30%;}
100% {margin-top:0px;}
}
	
	div.task.current_page.simple_mode{
	
	}
	
	#showarea.page_view>div.task:first-child>.task_title{
		position:absolute;
		left:0px;
		/*top:30%;*/
		width:100%;
		text-align:center;
	}
	#showarea.page_view>div.task:first-child>.task_comment{
		position:absolute;
		left:5%;
		top:70%;
		width:90%;
		text-align:center;
	}
	#showarea.page_view>div.task:first-child>a.expend_fold{
		display:none;
	}	

	#play_control{
		float:right;
	    position: fixed;
		bottom: 30px;
		right: 5px;
	}
	.btn_for_toolbar{
		margin: 0px 1px;
		border-radius: 6px;
	}
	.btn_for_toolbar>i{
		 padding: 3px 10px;
	}
	a.btn_for_toolbar:hover{
		background-color: rgb(211, 226, 229);
	}
	.task_drag_over{
		background-color:rgba(228, 237, 235, 0.88);
	}
	
	.stage_icon{
		width:18px;
		height:18px;
		margin:0px 2px;
	}

	.start_date{
 		-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
		display: inline-block;white-space: nowrap;vertical-align: baseline;
		margin:0px 2px;padding: 2px 0px;
        font-size: 12px;font-weight: bold;line-height: 14px;
        color: #fff;background-color: #999; 
		
/* 		    border-top: solid 2px blue;
			border-bottom: solid 1px blue;
			border-radius: 0px;
			color:black;
			font-size:13px;
			 */
	}
	.tags b{
		-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;
		display: inline-block;white-space: nowrap;vertical-align: baseline;
		margin:0px 2px;padding: 2px 0px;
		font-size: 12px;font-weight: bold;line-height: 14px;
		color: #fff;background-color: #81778C;
	}
	.task_internal_link{
		margin:0px 0px;
	}
	.task_link>img{
		margin-bottom:3px;
		margin-left:2px;
		margin-right:2px;
		width:32px;
		height:32px;
	}
	.task_comment_icon{
		margin:0px 0px;
	}
	.magic_icon{
		margin:0px 0px;
	}
		

	#task_toolbar {
		position: absolute;
		z-index: 8;
		background-color: rgba(112, 124, 163, 0.87);
		display:block;
		padding:5px;
		border: 1px solid #D0D0D0;
		-webkit-box-shadow: 0 0 8px #D0D0D0;
	}
	#task_toolbar i.fa{
		width: 30px;
		height:30px;
		text-align: center;
		font-size: 1.33333333em;
	    line-height: 0.75em;
	    vertical-align: -15%;
		margin:3px;
		padding-top:8px;
		padding-bottom:2px;
	}
	#task_toolbar .btn{
		padding:6px 6px;
		border:0px;
		color: #FFFFFF;
		background-color: hsla(180, 22%, 31%, 0.65);		
	}
	
	#task_toolbar .btn:hover{
		color: hsla(180, 22%, 31%, 0.65);
		background-color: #FFFFFF;
	}
	#text_edit_div .btn{
		padding:0px;
	}
	#text_edit_div .btn i{
		padding:0px;
	}
	#text_edit_div input{
		width:65%;
	}
	a.magic_icon{
		display:none;
	}
	#simple_view a.magic_icon i.fa:before{
		content: "\f05d";
	}
	i.haschild{
		color:red;
	}
	#task_input{
		width:70%;
	}
	
	div.task.selected{
		background-color:#F7CEF2;
	}
/*
	div.task[data-taskid='42']>div:nth-of-type(2)>span.task_title {background-color:blue}
	div.task[data-taskid='42']>div:nth-of-type(3)>span.task_title{background-color:red;}
*/

/*	div.task[data-intags~='显示序号']>div.task{counter-increment:testname;}
	div.task[data-intags~='显示序号']>div.task:before{content:counter(testname);color:#f00;font-family:georgia,serif,sans-serif;}
	div.task[data-tags~='紧急']>span.task_title{color:blue;}
	div.task[data-tags~='重要']>span.task_title{color:red;font-weight:600;}
*/

	div.task.important_task{
		background-color:rgba(212, 227, 239, 0.69);
	}
	div.task.important_task[data-tags~='!']{
		height:auto!important;
		height:30px;
		min-height:30px;
	}
	div.task.important_task[data-tags~='!!']{
		height:auto!important;
		height:60px;
		min-height:60px;
	}
	div.task.important_task[data-tags~='!!!']{
		height:auto!important;
		height:90px;
		min-height:90px;
	}
	div.task.important_task[data-tags~='!!!!']{
		height:auto!important;
		height:120px;
		min-height:120px;
	}
	div.task.important_task[data-tags~='!!!!!']{
		height:auto!important;
		height:150px;
		min-height:150px;
	}


/*
适用chrome，但在IE下无法显示
.stage_icon{width:16px;height:16px;}
.stage_icon>i{width:16px;height:16px;}
	div.task[data-stage='doing']>a.stage_icon>i{content:url(/_assets/icons/play-circle.svg);}
	div.task[data-stage='urgent']>a.stage_icon>i{content:url(/_assets/icons/bomb.svg);}
	div.task[data-stage='finish']>a.stage_icon>i{content:url(/_assets/icons/check.svg);}
	div.task[data-stage='saved']>a.stage_icon>i{content:url(/_assets/icons/inbox.svg);}
	div.task[data-stage='farm-out']>a.stage_icon>i{content:url(/_assets/icons/hands5.svg);}
	div.task[data-stage='send']>a.stage_icon>i{content:url(/_assets/icons/paper-plane.svg);}
	div.task[data-stage='suspend']>a.stage_icon>i{content:url(/_assets/icons/pause-circle.svg);}
	div.task[data-stage='think']>a.stage_icon>i{content:url(/_assets/icons/idea.svg);}
	div.task[data-stage='entrust']>a.stage_icon>i{content:url(/_assets/icons/hand5.svg);}
	div.task[data-stage='giveup']>a.stage_icon>i{content:url(/_assets/icons/giveup.svg);}
	div.task[data-stage='question']>a.stage_icon>i{content:url(/_assets/icons/question.svg);}
*/

.stage_icon{width:32px;height:32px;}
.stage_icon>i{width:32px;height:32px;
			padding:16px;
			background:  no-repeat top left scroll;
			background-size: contain;
			background-position: center;}
	div.task[data-stage='']>a.stage_icon>i{padding:0px;}		
	div.task[data-stage='doing']>a.stage_icon>i{background-image:url(/_assets/icons/play-circle.svg);}
	div.task[data-stage='urgent']>a.stage_icon>i{background-image:url(/_assets/icons/bomb.svg);}
	div.task[data-stage='finish']>a.stage_icon>i{background-image:url(/_assets/icons/check.svg);}
	div.task[data-stage='saved']>a.stage_icon>i{background-image:url(/_assets/icons/inbox.svg);}
	div.task[data-stage='farm-out']>a.stage_icon>i{background-image:url(/_assets/icons/hands5.svg);}
	div.task[data-stage='send']>a.stage_icon>i{background-image:url(/_assets/icons/paper-plane.svg);}
	div.task[data-stage='suspend']>a.stage_icon>i{background-image:url(/_assets/icons/pause-circle.svg);}
	div.task[data-stage='think']>a.stage_icon>i{background-image:url(/_assets/icons/idea.svg);}
	div.task[data-stage='entrust']>a.stage_icon>i{background-image:url(/_assets/icons/hand5.svg);}
	div.task[data-stage='giveup']>a.stage_icon>i{background-image:url(/_assets/icons/giveup.svg);}
	div.task[data-stage='question']>a.stage_icon>i{background-image:url(/_assets/icons/question.svg);}

/*
试图针对IE下写个样式，但没有生效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
	div.task{background-color:red;}
    .stage_icon{width:16px;height:16px;}
	.stage_icon>i{width:16px;height:16px;
			padding-bottom:1px;
			padding-left:5px;
			padding-right:5px;
			background-size: 16px 16px;
			background-position: center;}		
	div.task[data-stage='doing']>a.stage_icon>i{background-image:url(/_assets/icons/play-circle.svg);}
	div.task[data-stage='urgent']>a.stage_icon>i{background-image:url(/_assets/icons/bomb.svg);}
	div.task[data-stage='finish']>a.stage_icon>i{background-image:url(/_assets/icons/check.svg);}
	div.task[data-stage='saved']>a.stage_icon>i{background-image:url(/_assets/icons/inbox.svg);}
	div.task[data-stage='farm-out']>a.stage_icon>i{background-image:url(/_assets/icons/hands5.svg);}
	div.task[data-stage='send']>a.stage_icon>i{background-image:url(/_assets/icons/paper-plane.svg);}
	div.task[data-stage='suspend']>a.stage_icon>i{background-image:url(/_assets/icons/pause-circle.svg);}
	div.task[data-stage='think']>a.stage_icon>i{background-image:url(/_assets/icons/idea.svg);}
	div.task[data-stage='entrust']>a.stage_icon>i{background-image:url(/_assets/icons/hand5.svg);}
	div.task[data-stage='giveup']>a.stage_icon>i{background-image:url(/_assets/icons/giveup.svg);}
	div.task[data-stage='question']>a.stage_icon>i{background-image:url(/_assets/icons/question.svg);}
}
*/
	
	
	/*加before也可在IE里显示，但大小无法控制*/
	/*大小要在content元素上控制*/
	
	html.ie .icon-blank:before{content:url(/_assets/icons/blank.svg);}
	html.ie .icon-doing::before{content:url(/_assets/icons/play-circle.svg);}
	html.ie .icon-urgent::before{content:url(/_assets/icons/bomb.svg);}
	html.ie .icon-finish::before{content:url(/_assets/icons/check.svg);}
	html.ie .icon-ziped:before{content:url(/_assets/icons/inbox.svg);}
	html.ie .icon-send:before{content:url(/_assets/icons/paper-plane.svg);}
	html.ie .icon-pause:before{content:url(/_assets/icons/pause-circle.svg);}
	html.ie .icon-think:before{content:url(/_assets/icons/idea.svg);}
	html.ie .icon-hand:before{content:url(/_assets/icons/hands5.svg);}
	html.ie .icon-giveup:before{content:url(/_assets/icons/giveup.svg);}	
	html.ie .icon-question:before{content:url(/_assets/icons/question.svg);}
	
	/*以下专用于IE，但能与上述样式共存，很好*/

    .icon-blank{content:url(/_assets/icons/blank.svg);}
	.icon-doing{content:url(/_assets/icons/play-circle.svg);}
	.icon-urgent{content:url(/_assets/icons/bomb.svg);}
	.icon-finish{content:url(/_assets/icons/check.svg);}
	.icon-ziped{content:url(/_assets/icons/inbox.svg);}
	.icon-send{content:url(/_assets/icons/paper-plane.svg);}
	.icon-pause{content:url(/_assets/icons/pause-circle.svg);}
	.icon-think{content:url(/_assets/icons/idea.svg);}
	.icon-hand{content:url(/_assets/icons/hands5.svg);}
	.icon-giveup{content:url(/_assets/icons/giveup.svg);}	
	.icon-question{content:url(/_assets/icons/question.svg);}




